<template lang="html">
	<div class="Sellout">
		<el-form ref="form" :model="form" size="small">
				<!--卖出价-->
			<el-form-item :label="$t('bibi.sell[0]')">
				<!--以当前最优价格交易-->
				<el-input v-if="ModifyState" :value="$t('bibi.sell[1]')" :disabled="ModifyState"></el-input>
				<el-input v-else v-model="sendData.buyprice" :disabled="ModifyState"></el-input>

			</el-form-item>
			<!--交易数量-->
			<el-form-item :label="$t('bibi.sell[2]')">
				<el-input v-model="sendData.buynum">
					<template slot="append">{{Data.code | normal }}</template>
				</el-input>
				<div class="number" v-if="isLogin && form.maximum>=1">
					<el-slider v-model="sendData.buynum" :min="0" :max="form.maximum" :step="0.0001" :show-tooltip="false"></el-slider>
					<span class="MaxLen">{{form.maximum}} {{Data.code | normal }}</span>
				</div>
				<div class="number" v-else>
					<el-slider v-model="sendData.buynum" :min="0" :max="form.maximum" :step="0.0001" :show-tooltip="false" disabled></el-slider>
					<span class="MaxLen">0 {{Data.code | normal }}</span>
				</div>
			</el-form-item>
			<div class="jiaoyiAll jiaoyiSell">
				<!--交易额-->
				<el-form-item :label="$t('bibi.sell[3]')">
					<p v-if="ModifyState">{{form.turnover}} <span>{{Data.code | normal }}</span></p>
					<p v-else>{{form.turnover}} <span>USDT</span></p>

				</el-form-item>
			</div>
			<el-form-item>
				<!--卖出 请登录-->
				<el-button v-if='isLogin' type="" size="small" :loading="loadingsellout" @click="onSubmit">{{$t('bibi.sell[4]')}}{{Data.code | normal }}</el-button>
				<el-button v-else type="" size="small" :loading="loadingsellout" @click="onSubmit" disabled>{{$t('bibi.sell[5]')}}</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	export default {
		props: ['Data', 'ModifyState'],
		data() {
			return {
				activeName: 'first',
				form: {
					maximum: 0, //交易最大数量
					turnover: "", //交易额
				},
				//需要向后台传的数据
				sendData: {
					mobile: null, //手机号
					code: '', //code
					buyprice: 0, //最新价格 
					buynum: 0, //买入数量
					otype: 2, //市价 2 限价 1 （默认市价）
					type: 2, //涨（买入） 1 跌 2（卖出）

				},
				loadingsellout: false, //防止重复提交
				isLogin: false, //判断有没有登录
			}
		},
		watch: {
			'Data.code': function() {
				this.sendData.buyprice = this.Data.PriceData;
				this.sendData.buynum = 0;
			},
			'Data.syb': function() {
				this.maxCanBuy();
			},
			'Data.PriceData': function(val, oval) {
				var _this = this;
				//点击卖5买5
				if(_this.ModifyState) {
					_this.sendData.buyprice = val;
				}
				if(this.Data.buyorsell == 'sell') {
					_this.sendData.buyprice = val;
				}
				
				_this.sendData.code = _this.Data.code; //code 
				this.maxCanBuy();
			},
			'Data.wallone': function(val, oval) {
				this.maxCanBuy();
				this.allMoney();
			},
			'sendData.buyprice': function(val, oval) {
				//从新计算最大购买量和交易额
				if(!this.isLogin) return false;
				this.maxCanBuy();
				this.allMoney();
			},
			'sendData.buynum': function(val, oval) {
				//从新计算最大购买量和交易额
				if(!this.isLogin) return false;
				this.sendData.buynum = Number(val);
				this.maxCanBuy();
				this.allMoney();
			},
		},
		//过滤器
		filters: {
			normal: function(val) {
				var n = val.indexOf('_');
				if(n == -1) return '--'
				return val.toUpperCase().slice(0, n);
			}
		},
		methods: {
			//最大购买量
			maxCanBuy() {
//				if(this.ModifyState) {
//					this.form.maximum = Number(Number(this.Data.syb).toFixed(4)); //交易最大数量
//					return false;
//				}
				
				this.form.maximum = Number(Number(this.Data.syb).toFixed(4)); //交易最大数量
			},
			//最总交易额
			allMoney() {
				/*
					 总价格计算公式  价格* 数量（ 手续费 + 1/杠杆  ）
				 	其中价格  （买入）= 当前价格  + 点差 * 最小浮动价         （卖出）= 当前价格  - 点差 * 最小浮动价
				 * */

				if(this.ModifyState) {
					this.form.turnover = Number( (this.sendData.buynum).toFixed(4));
					return false;
				}
				this.form.turnover = Number(((this.sendData.buyprice * this.sendData.buynum)).toFixed(4));

			},
			onSubmit: function() { //订单
				var _this = this;
				var dis = null;
				if(_this.ModifyState) {
					_this.sendData.otype = 2;
					//市价
					dis = _this.$t("bibi.alse[0]");

				} else if(!_this.ModifyState) {
					_this.sendData.otype = 1;
					//限价
					dis = _this.$t("bibi.alse[1]");
				}
				_this.sendData.mobile = sessionStorage.mobile; //手机号 
				if(_this.ModifyState) {
					//市价  委托总金额  委托总数量 
					
					//当前最优价格
					_this.sendData.buyprice = _this.$t("bibi.alse[2]");;
					var sendData = {
						mobile: sessionStorage.mobile,
						code: _this.sendData.code,
						toalnum: _this.sendData.buynum, //委托总金额 (市价买入)
						type: _this.sendData.type, //1买入 2卖出 
						otype: _this.sendData.otype, //1限价 2市价 
					}

				} else {
					//委托价格 委托数量 
					var sendData = {
						mobile: sessionStorage.mobile,
						code: _this.sendData.code,
						buyprice: _this.sendData.buyprice, //委托价格
						buynum: _this.sendData.buynum, //委托数量
						type: _this.sendData.type, //1买入 2卖出 
						otype: _this.sendData.otype, //1限价 2市价 
					}

				}

				if(!_this.$public.dataDetection(sendData, _this.Data.wallone, _this)) {
					return false
				}
			
				const h = this.$createElement;
				this.$msgbox({
					title: _this.$t("bibi.alse[3]"),
					message: h('div', {
						style: 'width: 60%;margin:0 auto'
					}, [

						h('div', {
							style: 'overflow: hidden'
						}, [
							h('p', {
								style: 'float:left'
							}, [
								h('span', null, _this.$t("bibi.alse[4]")+'：' ),
								h('span', {
									style: 'color:#03be87'
								}, _this.$t("bibi.alse[5]")),
							]),
							h('p', {
								style: 'float:right'
							}, [
								h('span', null, _this.$t("bibi.alse[6]")+'：'  ),
								h('span', null, dis),
							])
						]),
						h('div', {
							style: 'overflow: hidden'
						}, [
							h('p', {
								style: 'float:left'
							}, [
								h('span', null, _this.$t("bibi.alse[7]")+'：'  ),
								h('span', null, _this.sendData.buyprice),
							]),h('p', {
								style: 'float:right'
							}, [
								h('span', null, _this.$t("bibi.alse[8]")+'：'  ),
								h('span', null, _this.sendData.buynum),
							]),
						]),
					]),
					showCancelButton: true,
					confirmButtonText: _this.$t("bibi.alse[9]"),
					cancelButtonText: _this.$t("bibi.alse[10]"),
					beforeClose: (action, instance, done) => {
						if(action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = _this.$t("bibi.alse[11]");
							//数据请求 开始下单
							done();
							_this.$http.post(_this.$http.bbtran, sendData).then(function(response) {
								instance.confirmButtonLoading = false;
								if(response.data.status == "200") {
									_this.$public.msg(_this.$t("bibi.alse[12]"), 'success', _this);
									_this.sendData.buynum = 0;
									_this.$emit('changeData');
								} else {
									_this.$public.msg(response.data.msg, 'warning', _this);
								}
							}).catch(function(error) {});

						} else {
							done();
						}
					}
				}).then(action => {});
			},
		},
		// 路由改变时
		beforeRouteLeave(to, from, next) {},
		mounted: function() {
			var _this = this;
//			_this.userInfo();
			if(sessionStorage.account){
				//表示已经登录了
				_this.isLogin = true;
			}
			_this.sendData.code = _this.Data.code; //code 
			setTimeout(function() {
				_this.sendData.buyprice = _this.Data.PriceData; //最新价格
				_this.maxCanBuy();
				_this.allMoney();
			}, 1500)
		},
		components: {}
	}
</script>